
import React, { Component, PropTypes } from 'react';
import { View, StyleSheet, Dimensions, LayoutAnimation } from 'react-native';
import { h, Base, CusComponents } from 'yzt-react-base';
import { FsTouch, AppConst } from '../../YZTFlagshipBase/index';
const { YztImage, YztText } = CusComponents;
const _windows = Dimensions.get('window');

class InsuranceKindButton extends Component {
    static propTypes = {
        title: PropTypes.string.isRequired,
        select: PropTypes.bool,
        index: PropTypes.number,
        clickAction: PropTypes.func
    };
    constructor(props) {
        super(props);
        this.onPressButton = this.onPressButton.bind(this);
    }
    onPressButton = ()=>{
        if (this.props.title){
            this.props.clickAction(this.props.index);
        }
    };

    render(){
        let color = this.props.select?'#FFFFFF':'#2D4486';
        return (
            <FsTouch
                key={this.props.index}
                onPress={this.onPressButton}
                ubt={[AppConst.APP_FLAGSHIP_INSURANCE_MODULE_NAME,'保险商城_点击_'+this.props.title]}
            >
                <View style={styles.button}>
                    <YztText style={[styles.buttonTitle, {borderColor:color}]}> {this.props.title} </YztText>
                </View>
            </FsTouch>
        );
    }
}

class UpAndDownArrow  extends Component {
    static propTypes = {
        clickAction: PropTypes.func
    };

    constructor(props) {
        super(props);
        this.state = {
            change: true
        }
    }

    changeUpAndDown(){
        let show = !this.state.change;
        this.state.change = show;
        this.props.clickAction(show);
    }

    render(){
        let arrowIcon = this.state.change?'arrowDown':'arrowUp';
        return (
            <FsTouch onPress={(e)=>{this.changeUpAndDown(e)}}>
                <View  style={styles.containerArrow}>
                    <YztImage source={{uri:arrowIcon}} style={styles.arrowStyle}/>
                </View>
            </FsTouch>);
    }
}

class InsuranceKindCard extends Component {
    static propTypes = {
        categoryData: PropTypes.array,
        clickAction: PropTypes.func
    };
    constructor(props) {
        super(props);
        this.state = {
            categoryData: [],
            index: 0,
            items: 10
        }
    }

    _arrow( datas ){
        if ( datas && datas.length > 10 )
        {
            return (<UpAndDownArrow clickAction={(e)=>{this._showAndHideKind(e)}}/>);
        }
        return (<View style={{width:h(_windows.width) ,height:h(20)}}/>);
    };

    _showAndHideKind = (show) => {
        let sumItems = show ? 10 : this.props.categoryData.length;
        LayoutAnimation.configureNext({
            duration: 250,   //持续时间
            create: {
                type: 'easeInEaseOut',
                property: 'opacity'
            },
            update: {
                type: 'easeInEaseOut'
            }
        });
        this.setState({items: sumItems});
    };

    _showKindNeedRows = ()=> {
        let listData = this.props.categoryData.slice(0,this.state.items);
        return listData.map((t, i)=>{
            return (
                <View style={{marginTop: h(20)}}>
                    <InsuranceKindButton key={i} title={t.title} select={t.select} index={i} clickAction={(e)=>{this._changeInsuranceKind(e)}}/>
                </View>
            );
        });
    };

    // 重新选择保险分类
    _changeInsuranceKind(index){
        let p = this.props.categoryData[this.state.index];
        p.select = false;
        this.props.clickAction(index);
        this.state.index=index;
    }

    render() {
            this.state.categoryData=this.props.categoryData.slice(0,this.state.items);
        return (
            <View style={styles.container}>
                { this._showKindNeedRows()}
                { this._arrow(this.props.categoryData) }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    button: {
        justifyContent: 'center',
        alignItems: 'center',
        width:((_windows.width-20)/5)
    },
    buttonTitle:{
        fontSize:h(32),
        color:'#FFFFFF',
        height:26,
        paddingLeft:10,
        paddingRight:6,
        paddingTop:3,
        borderWidth:2,
        borderRadius:13
    },
    container: {
        flexDirection: 'row',
        flexWrap:'wrap',
        backgroundColor: '#2D4486',
        alignItems: 'center',
        paddingLeft: h(20),
        paddingRight: h(20)
    },
    containerArrow: {
        justifyContent: 'center',
        alignItems: 'center',
        width:h(_windows.width*2-40),
        height:h(60),
        marginBottom:h(10)
    },
    containerRow: {
        flexDirection:'row',
        marginTop: h(20)
    },
    containerWrap: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        backgroundColor: '#2D4486',
        justifyContent: 'flex-start',
        alignItems: 'center',
        paddingTop: 10
    },
    arrowStyle:{
        width: h(28),
        height: h(16),
        backgroundColor: '#2D4486',
        justifyContent: 'center'
    }
});

export { InsuranceKindCard, UpAndDownArrow, InsuranceKindButton };
